<template>
  <keep-alive>
  <div class="home">
    <ShaderFlat class="shader-bg">
      <div class="inner-info">
        <div class="sys-title">Shader 仓库</div>
      </div>
      <i class="version-tip">v 1.0.4</i>
    </ShaderFlat>
  </div>
  </keep-alive>
</template>

<script>
  import ShaderFlat from '../../components/Shader/ShaderFlat'
  export default {
    name: 'Home',
    components: {
      ShaderFlat
    }
  }
</script>

<style lang="stylus" scoped>
  .home
    position absolute
    width: 100%
    height: 100%
    // background-image linear-gradient(to right bottom ,#0bc7f8, #fb0461)
    // background-image linear-gradient(to right bottom ,transparent 65%, black 60%, rgba(60, 75, 180, 1))
    &:after
      background radial-gradient(transparent 70%, rgba(100,100,100,0.1) 80%, rgba(0,0,0,0.1) 100%)
      position absolute
      z-index 1
      bottom: 0
      right: 0
      content: ''
      display block
      width: 200%
      height: 200%
    .shader-bg
      opacity 0.8
      .inner-info
        position absolute
        left: 50%
        top: 50%
        width: 100%
        line-height: 400px
        background-color: rgba(60, 75, 180, 0.2)
        transform translate(-50%, -50%)
        .sys-title
          width: 100%
          font-size: 80px
          font-weight: 700
          letter-spacing 60px
          text-align center
          text-shadow 4px 4px 4px #222222
      .version-tip
        position absolute
        right: 20px
        bottom: 10px
</style>
